<template>
  <div class="modal-overlay" @click.self="close">
    <div class="modal-container">
      <div class="modal-header">
        <h3>{{ exam.paperName }} - 考生信息</h3>
        <button class="close-btn" @click="close">
          <i class="fas fa-times"></i>
        </button>
      </div>

      <div class="modal-body">
        <div class="exam-summary">
          <div class="summary-item">
            <span class="label">考试状态:</span>
            <span class="value">
              <span class="status-dot" :class="getExamStatusClass(exam)"></span>
              {{ getExamStatusText(exam) }}
            </span>
          </div>
          <div class="summary-item">
            <span class="label">总考生数:</span>
            <span class="value">{{ records.length }}</span>
          </div>
          <div class="summary-item">
            <span class="label">已完成:</span>
            <span class="value">{{ getCompletedCount() }}</span>
          </div>
          <div class="summary-item">
            <span class="label">平均分:</span>
            <span class="value">{{ getAverageScore() }}</span>
          </div>
        </div>

        <div class="examinee-list">
          <div class="list-header">
            <div class="header-item">考生ID</div>
            <div class="header-item">状态</div>
            <div class="header-item">分数</div>
            <div class="header-item">操作</div>
          </div>

          <div
              v-for="record in records"
              :key="record.recordId"
              class="examinee-item"
          >
            <div class="item-cell examinee-id">{{ record.userId }}</div>
            <div class="item-cell">
              <span class="status-badge" :class="getRecordStatusClass(record)">
                {{ getRecordStatusText(record) }}
              </span>
            </div>
            <div class="item-cell">
              {{ record.score !== null ? record.score : '--' }}
            </div>
            <div class="item-cell actions">
              <button class="action-btn view-btn" @click="viewDetails(record)">
                <i class="fas fa-eye"></i> 详情
              </button>
            </div>
          </div>
        </div>
      </div>

      <div class="modal-footer">
        <button class="btn btn-close" @click="close">
          关闭
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ExamDetailsModal',
  props: {
    exam: {
      type: Object,
      required: true
    },
    records: {
      type: Array,
      required: true
    }
  },
  methods: {
    close() {
      this.$emit('close');
    },

    getExamStatusText(exam) {
      if (exam.inProgress > 0) return '进行中';
      if (exam.completed > 0) return '已完成';
      return '未开始';
    },

    getExamStatusClass(exam) {
      const status = this.getExamStatusText(exam);
      return {
        'in-progress': status === '进行中',
        'completed': status === '已完成',
        'not-started': status === '未开始'
      };
    },

    getRecordStatusText(record) {
      return record.status === 1 ? '已完成' : '进行中';
    },

    getRecordStatusClass(record) {
      return {
        'completed': record.status === 1,
        'in-progress': record.status === 0
      };
    },

    getCompletedCount() {
      return this.records.filter(r => r.status === 1).length;
    },

    getAverageScore() {
      const completed = this.records.filter(r => r.status === 1 && r.score !== null);
      if (completed.length === 0) return '--';
      const sum = completed.reduce((acc, curr) => acc + curr.score, 0);
      return (sum / completed.length).toFixed(1);
    },

    viewDetails(record) {
      // 这里可以添加查看考生详细信息的逻辑
      console.log('查看考生详情:', record);
    },

    formatDateTime(dateString) {
      if (!dateString) return '--';
      const date = new Date(dateString);
      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
    }
  }
}
</script>

<style lang="less" scoped>
@primary: #4361EE;
@primary-light: #A5B4FC;
@primary-lighter: #E0E7FF;
@secondary: #3A0CA3;
@success: #10B981;
@warning: #F59E0B;
@danger: #EF4444;
@gray-100: #F3F4F6;
@gray-200: #E5E7EB;
@gray-300: #D1D5DB;
@gray-400: #9CA3AF;
@gray-500: #6B7280;
@gray-600: #4B5563;
@gray-700: #374151;
@gray-800: #1F2937;
@gray-900: #111827;

@shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
@shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
@shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
@radius-sm: 0.375rem;
@radius-md: 0.5rem;
@radius-lg: 0.75rem;
@transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease-out;
}

.modal-container {
  background-color: white;
  border-radius: @radius-md;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: @shadow-lg;
  animation: slideUp 0.3s ease-out;
}

.modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid @gray-200;
  display: flex;
  align-items: center;
  justify-content: space-between;

  h3 {
    margin: 0;
    font-size: 1.25rem;
    color: @gray-800;
  }

  .close-btn {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: @gray-500;
    cursor: pointer;
    padding: 0.5rem;
    transition: @transition;

    &:hover {
      color: @gray-700;
    }
  }
}

.modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}

.exam-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid @gray-200;

  .summary-item {
    display: flex;
    flex-direction: column;

    .label {
      font-size: 0.875rem;
      color: @gray-500;
      margin-bottom: 0.25rem;
    }

    .value {
      font-size: 1rem;
      font-weight: 500;
      color: @gray-800;
      display: flex;
      align-items: center;
      gap: 0.5rem;

      .status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;

        &.in-progress {
          background-color: @warning;
        }

        &.completed {
          background-color: @success;
        }

        &.not-started {
          background-color: @gray-400;
        }
      }
    }
  }
}

.examinee-list {
  .list-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding: 0.75rem 0;
    border-bottom: 1px solid @gray-200;
    font-weight: 600;
    color: @gray-700;
    font-size: 0.875rem;
  }

  .examinee-item {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid @gray-100;
    font-size: 0.875rem;

    .item-cell {
      padding: 0 0.5rem;

      &.examinee-id {
        font-weight: 500;
        color: @gray-800;
      }

      .status-badge {
        display: inline-block;
        padding: 0.25rem 0.5rem;
        border-radius: 1rem;
        font-size: 0.75rem;

        &.completed {
          background: rgba(@success, 0.1);
          color: @success;
        }

        &.in-progress {
          background: rgba(@warning, 0.1);
          color: @warning;
        }
      }

      &.actions {
        display: flex;
        justify-content: flex-end;

        .action-btn {
          background: none;
          border: none;
          padding: 0.375rem 0.75rem;
          border-radius: @radius-sm;
          font-size: 0.8125rem;
          cursor: pointer;
          transition: @transition;
          display: flex;
          align-items: center;
          gap: 0.25rem;

          &.view-btn {
            background-color: @primary-lighter;
            color: @primary;

            &:hover {
              background-color: darken(@primary-lighter, 5%);
            }
          }

          i {
            font-size: 0.75rem;
          }
        }
      }
    }

    &:hover {
      background-color: @gray-100;
    }
  }
}

.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid @gray-200;
  display: flex;
  justify-content: flex-end;

  .btn {
    padding: 0.625rem 1.25rem;
    border-radius: @radius-sm;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: @transition;
    border: none;

    &.btn-close {
      background-color: @primary;
      color: white;

      &:hover {
        background-color: darken(@primary, 5%);
      }
    }
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 768px) {
  .modal-container {
    width: 95%;
  }

  .examinee-list {
    .list-header, .examinee-item {
      grid-template-columns: 1fr 1fr;

      .header-item:nth-child(3),
      .item-cell:nth-child(3) {
        display: none;
      }
    }
  }
}

@media (max-width: 480px) {
  .modal-header {
    padding: 1rem;

    h3 {
      font-size: 1.125rem;
    }
  }

  .modal-body {
    padding: 1rem;
  }

  .exam-summary {
    grid-template-columns: 1fr 1fr;
  }

  .examinee-list {
    .list-header, .examinee-item {
      grid-template-columns: 1fr;

      .header-item:nth-child(2),
      .item-cell:nth-child(2) {
        display: none;
      }
    }
  }
}
</style>